<template>
  <div class="root_page">
    <div class="form_row">
      <div class="title">管理员登录</div>
      <div class="field_row">
        <var-input v-model.trim="form.username" />
      </div>
      <div class="field_row">
        <var-input v-model.trim="form.password" type="password" />
      </div>
      <var-button primary @click="login">登录</var-button>
    </div>
  </div>
</template>
<script>
import http from "./api";
import { encode } from "@/utils/crypto";
import { debounce, setToken } from "@/utils";
export default {
  name: "LoginPage",
  data() {
    return {
      form: {
        username: process.env.BUILD_ENV !== "prod" ? "admin" : "",
        password: process.env.BUILD_ENV !== "prod" ? "123456" : "",
      },
    };
  },
  methods: {
    login: debounce(async function () {
      try {
        const res = await http.login({
          username: this.form.username,
          password: encode(this.form.password),
        });
        console.log("login", res, this);
        this.$message.success("登录成功");
        setToken(process.env.MAIN_TOKEN, res.data.token);
        this.$router.push({
          name: "root",
        });
      } catch (e) {
        console.log("login", e);
        this.$message.error(e.msg || "登录失败");
      }
    }, 3000),
  },
};
</script>
<style lang="scss" scoped>
.root_page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("./images/page_bg.png");
  .form_row {
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    width: 500px;
    .title {
      font-size: 20px;
      text-align: center;
      padding: 20px 0;
    }
    .field_row {
      padding: 0 0 20px 0;
    }
  }
}
</style>
